CSS: Transições e Animações

Transições

Ajuste as propriedades de transição e clique no botão para alternar o estado do bloco.

transition-property

      

Interpolate-size (auto ↔ px)

interpolate-size

Permite animar entre valores textuais (ex.: height: autoheight: 160px).

Título

Este bloco demonstra a transição entre height: auto e um valor fixo em pixels. Sem interpolate-size: allow-keywords, a mudança acontece sem animação; com ele, a altura interpola suavemente.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, laudantium. Consequatur, omnis.


      

Transformações


      

Animações

Selecione um @keyframes e ajuste os parâmetros da animação.